
import {useReducer} from 'react'
import { Button,Input } from 'antd'
// useReducer 跟 useState 一样的都是帮我们管理组件的状态的，但是呢与useState不同的是 useReducer 是集中式的管理状态的。
export function UseReducerDemo () {

    const initData = [
        {
            name:'手机',
            price:5000,
            id:1,
            isEdit:false

        },
        {
            name:'平板',
            price:6000,
            id:2,
            isEdit:false

        },
        {
            name:'电脑',
            price:8000,
            id:3,
            isEdit:false

        },
    ]
    // typeof是ts的类型推导，作用是从 initData 变量推导出其类型，并将这个类型命名为 List,相当于
    // type List = {
    //     name: string;
    //     price: number;
    //     id: number;
    // }[]
    type List = typeof initData
    interface Action { 
      type: "ADD" | "SUB" | 'DELETE' | 'EDIT' | 'UPDATE_NAME', 
      id: number, 
      newName?: string 
    }
    //根据旧状态进行处理 oldState，处理完成之后返回新状态 newState
    //reducer 只有被dispatch的时候才会被调用 刚进入页面的时候是不会执行的
    //oldState 任然是只读的
    function renduer(oldState:List,action:Action) {
        console.log('action',action)
        const findItem = oldState.find(item => item.id === action.id)

        switch(action.type) {
            case 'ADD':
                // 可以直接改数组里面对象
                if(findItem) {
                    findItem.price+=1000
                }

                return [...oldState]

            case "DELETE":
                return oldState.filter((item) => item.id===action.id)
            
            case "EDIT":
                if(findItem) {
                    findItem.isEdit = !findItem.isEdit
                }
                return [...oldState]
                
            case 'SUB':
                 // 可以直接改数组里面对象
                 if(findItem) {
                    findItem.price-=1000
                }

                return [...oldState]
            case 'UPDATE_NAME':
                if(action.newName&&findItem) {
                    findItem.name =action.newName
                }
                return [...oldState];
            
                default:
                    return [...oldState]

        }

    }

  

    const [data,dispatch] = useReducer(renduer,initData)



    return (
        <div>
            <h3> UseReducer使用</h3>

            <table>

            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品id</th>
                    <th>操作</th>
                </tr>

            </thead>

            <tbody>
                {
                    data.map((item) => {
                        return (
                            <tr key={item.id}>
                              <td>
                                {
                                    item.isEdit?
                                    <Input
                                    value={item.name} 
                                    onChange={(e)=>dispatch({type:'UPDATE_NAME',id:item.id,newName:e.target.value})}
                                    onBlur={(e)=>dispatch({type:'EDIT',id:item.id})}
                                    ></Input>
                                    : 
                                    <span> {item.name}</span>
                                }
                               
                                 
                              </td>
                              <td>
                                {item.price}
                              </td>
                              <td>
                                {item.id}
                              </td>
                              <td align='center'>
                              <Button type='primary' onClick={()=>dispatch({type:'ADD',id:item.id})}>新增</Button>
                              <Button type='primary' onClick={()=>dispatch({type:'SUB',id:item.id})}>减少</Button>
                              <Button type='primary' onClick={()=>dispatch({type:'DELETE',id:item.id})}>删除</Button>
                              <Button type='primary' onClick={()=>dispatch({type:'EDIT',id:item.id})}>编辑</Button>
                              <Button type='primary' onClick={()=>dispatch({type:'UPDATE_NAME',id:item.id})}>更新</Button>
                              </td>
                            </tr>
                        )
                    })
                }
            </tbody>

            </table>

        </div>
    )

}